<template>
	<view class="content">
		<view class="cell_content" v-for="(item,index) in chat.msgList" :key="index">
			<view class="cell_time_content">
				<view class="cell_time app_content_color app_subtitle_color">
					<view>{{item.showTime}}</view>
				</view>
			</view>
			<view class="cell_other_content" v-if="item.sender != user.uid">
				<image class="cell_other_avatar app_background_color" mode="aspectFill" :src="chat.avatar" @tap="avatarTap"></image>
				<view class="cell_other_message_content">
					<view class="cell_message_content_text" selectable v-html="item.content"></view>
				</view>
			</view>
			<view class="cell_me_content" v-else>
				<view class="cell_me_message_content app_content_color app_title_color">
					<view class="cell_message_content_me_text app_title_color" selectable v-html="item.content"></view>
				</view>
			</view>
		</view>
		
		<view style="margin-bottom: 100px;"></view>
		<view class="reply_content app_content_color">
			<view class="reply_input_content app_background_color">
				<input class="reply_input app_title_color" placeholder="点击回复" @input="replyInput" confirm-type="send" @confirm="sendButtonTap"
				 :value="replyText" />
			</view>
			<view class="reply_button_content" @tap="sendButtonTap">
				<view>发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import http from "../../utils/http.js"
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				fromUid: "",
				chat: {},
				user: {},
				replyText: ""
			}
		},
		onLoad(options) {
			var that = this;
			uni.getStorage({
				key: 'uni_user_data',
				success: function(res) {
					var data = res.data;
					that.user = data;
				},
				fail: function() {
					uni.showToast({
						title: "获取用户信息失败",
						icon: "none"
					})
				}
			});

			this.fromUid = options.fromUid;
			this.loadData();
		},
		methods: {
			loadData() {
				var timestamp = Date.parse(new Date());
				var pmlist = {
					body: {
						externInfo: {
							onlyFromUid: 0
						},
						pmInfos: [{
							startTime: 0,
							cacheCount: 0,
							stopTime: timestamp,
							fromUid: this.fromUid,
							pmLimit: 102400
						}]
					}
				}
				var that = this;
				http.request("message/pmlist", {
					pmlist: JSON.stringify(pmlist)
				}, {
					success: function(data) {
						uni.stopPullDownRefresh();
						if (data.body.pmList.length > 0) {
							that.chat = data.body.pmList[0];
							that.chat.msgList.map(function(item) {
								item.showTime = util.dateStringFromTimestamp(item.time);
								const emojRegex =
									/(\[mobcent_phiz=(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]+\])/g;
								item.content = item.content.replace(emojRegex, (
									emoj) => {
										emoj = emoj.replace("[mobcent_phiz=",
											"")
										emoj = emoj.substr(0, emoj.length - 1)
										return `<img src="${emoj}" width="40"/>`;
									})
								return item;
							});
							uni.setNavigationBarTitle({
								title: that.chat.name
							})
						}
					},
					fail: function(msg) {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: msg,
							icon: "none"
						})
					}
				})
			},
			replyInput(e) {
				this.replyText = e.detail.value;
			},
			sendButtonTap() {
				var json = {
					msg: {
						type: "text",
						content: this.replyText
					},
					action: "send",
					toUid: this.fromUid
				};
				var that = this;
				uni.showLoading({
					title: "检测中.."
				})
				wx.cloud.callFunction({
					name: 'checkMsg',
					data: {
						"action": "msgSecCheck",
						"content": this.replyText
					}
				}).then(res => {
					uni.hideLoading()
					if (res.result.code == 200) {
						http.request("message/pmadmin",{json:JSON.stringify(json)},{
							success: function(data) {
								uni.showToast({
									title: "回复成功",
									icon: "none"
								})
								var list = {
									content:that.replyText,
									sender:that.user.uid,
									showTime:"刚刚",
									type:"text"
								}
								that.chat.msgList.push(list);
								that.replyText = "";
							},
							fail: function(msg) {
								uni.showToast({
									title: msg,
									icon: "none"
								})
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.result.msg
						})
					}
				})
				
			},
			avatarTap(){
				uni.navigateTo({
					url:"/pages/other-user/other-user?uid="+this.fromUid
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		width: 100%;
		flex-direction: column;
		padding-bottom: 100upx;
	}

	.cell_content {
		display: flex;
		flex-direction: column;
	}

	.cell_time_content {
		display: flex;
		width: 100%;
		margin-top: 30upx;
		justify-content: center;
		align-items: center;
	}

	.cell_time {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4upx;
		font-size: 20upx;
		height: 30upx;
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.cell_other_content {
		display: flex;
		flex-direction: row;
		margin-top: 20upx;
	}

	.cell_other_avatar {
		width: 80upx;
		height: 80upx;
		min-width: 80upx;
		max-width: 80upx;
		border-radius: 40upx;
		margin-left: 30upx;
	}

	.cell_other_message_content {
		display: flex;
		margin-left: 20upx;
		border-radius: 8upx;
		background-color: $uni-global-green-color;
		padding: 20upx;
		color: #fff;
	}

	.cell_me_content {
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;
	}

	.cell_me_message_content {
		display: flex;
		margin-right: 30upx;
		border-radius: 8upx;
		padding: 20upx;
	}

	.cell_message_content_text {
		word-wrap: break-word;
		max-width: 375upx;
		color: #fff;
		font-size: 30upx;
	}
	
	.cell_message_content_me_text {
		word-wrap: break-word;
		max-width: 375upx;
		font-size: 30upx;
	}

	.reply_content {
		display: flex;
		flex-direction: row;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.reply_input_content {
		display: flex;
		margin-top: 20upx;
		margin-left: 30upx;
		margin-bottom: 20upx;
		flex-grow: 1;
	}

	.reply_input {
		font-size: 30upx;
		margin-left: 20upx;
		height: 100%;
		margin-right: 20upx;
	}

	.reply_button_content {
		display: flex;
		background-color: $uni-global-green-color;
		align-items: center;
		justify-content: center;
		border-radius: 4upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
		margin-left: 30upx;
		margin-right: 20upx;
		padding-left: 30upx;
		padding-right: 30upx;
		color: #fff;
		font-size: 24upx;
	}

</style>
